<template>
  <div>
    <div class="table">
      <el-button
        style="margin: 20px 0 20px 0"
        type="primary"
        @click="handleClick((row = ''), (type = 1))"
        >新增</el-button
      >
      <el-table :data="taiTouTableData">
        <el-table-column prop="mobile" label="操作人" />
        <el-table-column label="开户人信息" width="180">
          <template #default="scope">
            <p>
              开户人信息:
              {{ JSON.parse(get(scope.row, 'info', '{}')).bankName || '' }}
            </p>
            <p>
              手机号:{{
                JSON.parse(get(scope.row, 'info', '{}')).bankRoot || ''
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <span class="btn" @click="handleClick(scope.row, (type = 2))"
              >编辑</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      v-model="dialogVisible"
      :title="title"
      custom-class="titleStyle"
      width="450"
    >
      <el-form ref="formRef" :rules="rules" :model="form" label-width="100px">
        <p class="infoContract">
          <WarningFilled
            style="width: 1.5em; height: 1.5em; margin-right: 8px"
          />账户信息必须与签约时提交的合同主体一致
        </p>
        <el-form-item label="发票抬头">
          <el-input
            v-model="form.invoces"
            placeholder="专票必填"
            class="styleInput"
          />
        </el-form-item>
        <el-form-item label="税号" prop="bankRoot">
          <el-input
            v-model="form.bankRoot"
            placeholder="请输入"
            class="styleInput"
            @input="handleInput(form.bankRoot)"
          />
        </el-form-item>
        <el-form-item label="注册地址">
          <el-input
            v-model="form.adress"
            placeholder="专票必填"
            class="styleInput"
          />
        </el-form-item>
        <el-form-item label="营业电话">
          <el-input
            v-model="form.phone"
            placeholder="专票必填"
            class="styleInput"
          />
        </el-form-item>
        <el-form-item label="开户行">
          <el-input
            v-model="form.bankName"
            placeholder="专票必填"
            class="styleInput"
          />
        </el-form-item>
        <el-form-item label="银行账号">
          <el-input
            v-model="form.bankAccount"
            placeholder="请输入"
            class="styleInput"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button class="footerBtn" @click="saveHandle(form)">
          提交申请
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { get } from 'lodash';
import withdraw from '@/modules';
const { upInvoiceAPI } = withdraw;
import { ref } from 'vue';
const formRef = ref();
const title = ref('添加发票抬头');
// 只允许输入数字
const handleInput = (data) => {
  form.value.bankRoot = data.replace(/[^\d]/g, '');
};
const emits = defineEmits(['clcikInfo']);
const dialogVisible = ref(false);
// const UserInfo = ref({});
const form = ref({
  id: 0,
  bankRoot: '',
  bankName: '',
});
const taiTouTableData = ref([
  {
    orderInfo: 111,
  },
]);
const prop = defineProps({
  taiTouTableData: {
    type: Array,
    default: () => [],
  },
});
const rules = reactive({
  bankRoot: [{ required: true, message: '请输入银行账号', trigger: 'blur' }],
  bankName: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
});
const saveClickAPI = () => {
  const info = ref({});
  info.value.bankName = form.value.bankName;
  info.value.bankRoot = form.value.bankRoot;
  upInvoiceAPI({ info: info.value, id: form.value.id }).then(({}) => {
    emits('clcikInfo');
  });
};
const saveHandle = async () => {
  // 提交表单前先进行验证
  try {
    await formRef.value.validate(); // 触发验证
    // 如果验证通过，这里可以执行提交操作
    saveClickAPI();
    dialogVisible.value = false; // 提交后关闭对话框
  } catch (error) {
    console.log('error:', error);
  }
};
// 使用 watch 观察 taiTouTableData 的变化
watch(
  () => prop.taiTouTableData,
  (newValue) => {
    newValue ? (taiTouTableData.value = newValue) : [];
  },
  { immediate: true }
); // 立即执行以查看初始数据
const handleClick = (row, type) => {
  if (type == 1) {
    dialogVisible.value = true;
    title.value = '添加发票抬头';
    return;
  } else {
    title.value = '编辑发票抬头';
    Object.assign(form.value, JSON.parse(row.info));
    form.value.id = row.id;
    dialogVisible.value = true;
  }
};
</script>

<style lang="scss" scoped>
.infoContract {
  display: flex;
  align-items: center;
  height: 40px;
  width: 420px;
  background-color: rgb(254, 245, 236);
  margin-bottom: 20px;
  text-align: left;
  padding-left: 20px;
  color: rgb(233, 180, 125);
  line-height: 40px;
  border-radius: 4px;
}
.btn {
  color: #165dff;
  cursor: pointer;
}
.el-button {
  background: #165dff !important;
  color: #fff;
}
.el-button:hover {
  color: #fff;
  opacity: 0.9;
}
</style>
<style lang="scss">
.el-dialog__header {
  height: 45px;
  min-height: 45px;
}
.el-dialog__body {
  margin-top: 40px;
}
.el-dialog__footer {
  justify-content: right;
}
</style>
